import React, { useState } from 'react';
import {
  AppleOutlined,
  HomeOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  SmileOutlined,
  UserOutlined
} from '@ant-design/icons';
import { Avatar, Button, Dropdown, Layout, Menu, MenuProps, theme } from 'antd';
import { Link, useNavigate, useRoutes } from 'react-router-dom'
import routes from './routes'
import { User } from './types';
import useBreakpoints from "./hooks/useBreakpoints";

const {Header, Sider, Content} = Layout;


const App: React.FC = () => {

  const element = useRoutes(routes);
  const breakpoint = useBreakpoints();
  const [path, setPath] = useState<string>("/home");
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const {
    token: {colorBgContainer},
  } = theme.useToken();
  const items: MenuProps['items'] = [
    {
      key: 'my',
      label: (
        <span>个人信息</span>
      ),
      icon: <AppleOutlined/>,
      onClick: (e) => {
        // console.log(e);
        navigate(`/${e.key}`);
        setPath('/' + e.key);
      }
    },
    {
      key: '2',
      label: (
        <span>
        aaa
      </span>
      ),
      icon: <SmileOutlined/>,
      disabled: true,
    },
    {
      key: '3',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
          3rd menu item (disabled)
        </a>
      ),
      disabled: true,
    },
    {
      key: '4',
      danger: true,
      label: 'a danger item',
    },
  ];

  const menus = [
    {
      key: '/home',
      icon: <HomeOutlined/>,
      label: '主页',
    },
    {
      key: '/my',
      icon: <UserOutlined/>,
      label: '我的',
    },
  ]
  const [user, setUser] = useState<User>({
    user_id: 123,
    nickname: 'cencus',
    avatar: "https://foruda.gitee.com/avatar/1675302584778090756/8878598_cencus_1675302584.png!avatar200"
  })

  const generateMenuItems = () => {
    return menus.map(item => (
      <Menu.Item key={item.key}>
        <Link to={item.key}>{item.label}</Link>
      </Menu.Item>
    ));
  };
  const onClick = e => {
    navigate(e.key);
    setPath(e.key)
  }

  return (
    <Layout style={{height: '100vh'}}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="demo-logo-vertical"/>
        <Menu
          onClick={onClick}
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['/home']}
          selectedKeys={[path]}
          items={menus}
        >
        </Menu>


      </Sider>
      <Layout>
        <Header style={{
          padding: 0,
          background: colorBgContainer,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
          <div>{breakpoint}</div>
          <Dropdown menu={{items}}>
            <Avatar style={{marginRight: "20px"}} src={user.avatar} icon={<UserOutlined/>}/>
          </Dropdown>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
          }}
        >
          {element}
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;